<template>
  <div
    class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-4"
  >
    <div
      class="bg-white rounded-lg shadow-xl max-w-2xl w-full max-h-[90vh] overflow-hidden"
    >
      <!-- 模态框头部  -->
      <div
        class="flex justify-between items-center p-6 border-b border-gray-200"
      >
        <div>
          <h2 class="text-xl font-semibold text-gray-800">
            {{ wordBank.name }}
          </h2>
          <div class="flex items-center gap-2 mt-1">
            <span
              :class="[
                'px-2 py-1 text-xs rounded-full',
                wordBank.isDefault
                  ? 'bg-green-100 text-green-800'
                  : 'bg-blue-100 text-blue-800',
              ]"
            >
              {{ wordBank.isDefault ? "默认题库" : "自定义题库" }}
            </span>
            <span class="text-sm text-gray-600">
              {{ wordBank.words.length }} 个词汇
            </span>
          </div>
        </div>
        <button
          @click="$emit('close')"
          class="text-gray-400 hover:text-gray-600 transition-colors"
        >
          <svg
            class="w-6 h-6"
            fill="none"
            stroke="currentColor"
            viewBox="0 0 24 24"
          >
            <path
              stroke-linecap="round"
              stroke-linejoin="round"
              stroke-width="2"
              d="M6 18L18 6M6 6l12 12"
            ></path>
          </svg>
        </button>
      </div>

      <!-- 模态框内容  -->
      <div class="p-6 overflow-y-auto max-h-[calc(90vh-140px)]">
        <!-- 搜索框 -->
        <div class="mb-4">
          <input
            v-model="searchQuery"
            type="text"
            placeholder="搜索词汇..."
            class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
          />
        </div>

        <!-- 词汇网格 -->
        <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 gap-2">
          <div
            v-for="word in filteredWords"
            :key="word"
            class="bg-gray-100 text-gray-800 px-3 py-2 rounded text-center text-sm hover:bg-gray-200 transition-colors"
          >
            {{ word }}
          </div>
        </div>

        <!-- 空状态 -->
        <div
          v-if="filteredWords.length === 0"
          class="text-center py-8 text-gray-500"
        >
          {{ searchQuery ? "没有找到匹配的词汇" : "这个题库是空的" }}
        </div>

        <!-- 统计信息 -->
        <div class="mt-6 pt-4 border-t border-gray-200 text-sm text-gray-600">
          <div class="flex justify-between">
            <span>创建时间: {{ formatDate(wordBank.createdAt) }}</span>
            <span>
              {{
                searchQuery
                  ? `显示 ${filteredWords.length} / ${wordBank.words.length}`
                  : `共 ${wordBank.words.length} 个词汇`
              }}
            </span>
          </div>
        </div>
      </div>

      <!-- 模态框底部 -->
      <div class="flex justify-end gap-3 p-6 border-t border-gray-200">
        <button
          @click="$emit('close')"
          class="px-4 py-2 bg-gray-500 text-white rounded-lg hover:bg-gray-600 transition-colors"
        >
          关闭
        </button>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed } from "vue";
import type { WordBankDetail } from "../services/api";

const props = defineProps<{
  wordBank: WordBankDetail;
}>();

const emit = defineEmits<{
  close: [];
}>();

const searchQuery = ref("");

const filteredWords = computed(() => {
  if (!searchQuery.value.trim()) {
    return props.wordBank.words;
  }

  const query = searchQuery.value.toLowerCase();
  return props.wordBank.words.filter((word) =>
    word.toLowerCase().includes(query)
  );
});

const formatDate = (dateString: string) => {
  return new Date(dateString).toLocaleDateString("zh-CN");
};
</script>
